<template>
  <div>
    <el-tabs tab-position="left">
      <el-tab-pane label="催缴设置">
        <section class="setting-bg pv-12 ph-16">
          <div style="max-width: 400px;">
            <el-switch
              v-model="isPress"
              class="fl-r mt-6"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
            />
            <h3>催缴设置</h3>
            <div class="fs-base fc-regular">（自动在账单支付日前一天发送一条催收短信，请保证短余额充足！）</div>
          </div>
        </section>
      </el-tab-pane>
      <el-tab-pane label="到期短信提醒">
        <el-alert title="在设定的提醒时间，系统会给提醒人发送短信" type="warning" show-icon :closable="false" />
        <section class="setting-bg pv-12 ph-16">
          <RoomStItem type="1" ref="roomRef1" />
          <RoomStItem type="2" ref="roomRef2" />
          <RoomStItem type="3" ref="roomRef3" />
          <RoomStItem type="4" ref="roomRef4" />
          <el-button @click="handleSave" type="primary">保存</el-button>
        </section>
      </el-tab-pane>
      <el-tab-pane label="即将到期设置">
        <section class="setting-bg pv-12 ph-16">
          <ExpireSt />
        </section>
      </el-tab-pane>
      <el-tab-pane label="脏房设置">
        <section class="setting-bg pv-12 ph-16">
          <div style="max-width: 400px;">
            <el-switch
              v-model="dirtyFlag"
              class="fl-r mt-6"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
            />
            <h3>脏房设置</h3>
            <div class="fs-base fc-regular">（可开启关闭房间中的脏房设置功能）</div>
          </div>
        </section>
      </el-tab-pane>
      <el-tab-pane label="合租房间编号规则设置">
        <section class="setting-bg pv-12 ph-16">
          <h3>合租房间编号规则设置</h3>
          <el-radio-group v-model="radio" style="width :500px;display: flex;">
            <el-radio :label="1" class="custom-radio">
              <div style="width: 400px;white-space: wrap;">
                <div>A、B、C、D</div>
                <div>举例：劲叶8幢1单元301室A，劲叶8幢1单元301室B，劲叶8幢1单元301室C，劲叶8幢1单元301室D</div>
              </div>
            </el-radio>
            <el-radio :label="2" class="custom-radio mt20">
              <div style="width: 400px;white-space: wrap;">
                <div>01、02、03、04</div>
                <div>举例：劲叶8幢1单元301室01，劲叶8幢1单元301室02，劲叶8幢1单元301室03，劲叶8幢1单元301室04</div>
              </div>
            </el-radio>
          </el-radio-group>
          <el-button @click="handleSave" type="primary" style="margin-top: 40px;">保存</el-button>
        </section>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="RoomSt">
import { Check, Close } from '@element-plus/icons-vue'
import RoomStItem from './roomStItem.vue'
import ExpireSt from './expireSt.vue'

const { proxy } = getCurrentInstance()

const isPress = ref(false)
const dirtyFlag = ref(false)
const radio = ref(1)

const data = reactive({
  form: {
    noticePhoneNumberList: []
  }
})
const  { form } = toRefs(data)

function handleSave() {
  Promise.all([proxy.$refs['roomRef1'].submit(), proxy.$refs['roomRef2'].submit(), proxy.$refs['roomRef3'].submit(), proxy.$refs['roomRef4'].submit()]).then(res => {
    console.log(res)
  }).catch(() => {
    proxy.$modal.msgError('请输入手机号')
  })
  
  
}

function handleRemovePhone(index) {
  form.value.noticePhoneNumberList.splice(index, 1)
}
</script>
<style lang="scss" scoped>
.mt-6 {
  margin-top: -6px;
}
.custom-radio {
  height: 80px;
  :deep(.el-radio__label) {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--el-border-color-lighter);
    margin-left: 10px;
    &:hover {
      border-color: var(--el-color-primary-light-3);
      color: var(--el-color-primary-light-3);
    }
  }
}
.is-checked {
  :deep(.el-radio__label) {
    border-color: var(--el-color-primary-light-3);
  }
}
</style>

